// 定义蛇的方块类  
// 创建方块接口
interface createRect{
    createRect(container:HTMLElement):void;
}

// 获取左边坐标接口
interface getleft{
    getleft():number;
}

// 获取上边距接口
interface getTop{
    getTop():number;
}

// 设置左边距接口
interface setLeft{
    setLeft(num:number):void;
}

// 设置上边距接口
interface setTop{
    setTop(num:number):void;
}


// 定义方块类
class Rect implements createRect,getleft,getTop,setLeft,setTop{
    RectEle:HTMLElement;
    constructor(x:number=0,y:number=0,color:string="green"){
        this.RectEle = document.createElement("div");
        this.RectEle.style.width = "50px";
        this.RectEle.style.position = "absolute";
        this.RectEle.style.height = "50px";
        this.RectEle.style.background = color;
        this.RectEle.style.left = x + "px";
        this.RectEle.style.top = y + "px";
        this.RectEle.style.border = "1px solid";
    }
    createRect(container:HTMLElement) {
        container.appendChild(this.RectEle);
    }
    getleft() {
        return parseInt(window.getComputedStyle(this.RectEle, null)['left']);
    }
    getTop() {
        return parseInt(window.getComputedStyle(this.RectEle, null)['top']);
    }
    setLeft(num:number) {
        this.RectEle.style.left = num + "px";
    }
    setTop(num:number) {
        this.RectEle.style.top = num + "px";
    }
}

export default Rect;